<template>
    <div class="sale">
        <div class="sale-top">
            <div>
                <div>
                    订单量：{{ orderData.orderCount }}
                </div>
                <div>
                    完成量：{{ orderData.completeOrderCount }}
                </div>
            </div>
            <div>
                <div>
                    销售额：￥ {{ orderData.sumMoney }}
                </div>
                <div>
                    成交额：￥ {{ orderData.currSumMoney }}
                </div>
            </div>
        </div>
        <div>
            <van-tabs v-model:active="active" @rendered="tabsClick(active)">
                <van-tab title="销售数据">
                    <div style="margin-top: 20px;">
                        <div ref="myMoneyChart" id="myMoneyChart" style="width: 100%;height:300px;"></div>
                        <div ref="myOrderChart" id="myOrderChart" style="width: 100%;height:300px;"></div>
                    </div>
                </van-tab>
                <van-tab title="商品销售">
                    <div>
                        <hr>
                        <van-tree-select v-model:main-active-index="activeIndex" style="height: 73.3vh;" :items="items">
                            <template #content>
                                <div v-for="(itme,i) in typeData">
                                    <div v-if="activeIndex === i">
                                        <van-grid :border="true">
                                            <van-grid-item text="图片" />
                                            <van-grid-item text="名称" />
                                            <van-grid-item text="销量" />
                                            <van-grid-item text="销售额" />
                                        </van-grid>
                                        <van-grid v-for="item in typeData[activeIndex].goods" :border="false"
                                            :column-num="4">
                                            <van-grid-item>
                                                <div>
                                                    <van-image :src="item.photo" />
                                                </div>
                                            </van-grid-item>
                                            <van-grid-item>
                                                <div>
                                                    {{ item.name }}
                                                </div>
                                            </van-grid-item>
                                            <van-grid-item>
                                                <div>
                                                    ×{{ item.sales }}
                                                </div>
                                            </van-grid-item>
                                            <van-grid-item style="width:60px;">
                                                <div style="color:red">
                                                    ￥{{ item.money }}
                                                </div>
                                            </van-grid-item>
                                        </van-grid>
                                    </div>
                                </div>
                            </template>
                        </van-tree-select>
                    </div>
                </van-tab>
                <van-tab title="订单数据">
                    <div>
                        <hr>
                        <div style="width: 100%;margin-top: -9px;">
                            <van-cell title="选择日期区间" :value="date" @click="show = true" />
                            <van-calendar v-model:show="show" :max-range="7" type="range" @confirm="onConfirm"
                                :min-date="minDate1" :max-date="maxDate1" />
                        </div>
                        <hr style="width: 100%;margin-top: 0px;">
                        <div ref="myCategoryOrderChart" id="myCategoryOrderChart" style="width: 100%;height:300px;">
                        </div>
                    </div>
                </van-tab>
                <van-tab title="销售额">
                    <div>
                        <hr>
                        <div style="width: 100%;margin-top: -9px;">
                            <van-cell title="选择日期区间" :value="date1" @click="show1 = true" />
                            <van-calendar v-model:show="show1" :max-range="7" type="range" @confirm="onConfirm2"
                                :min-date="minDate2" :max-date="maxDate2" />
                        </div>
                        <hr style="width: 100%;margin-top: 0px;">
                        <div ref="myCategoryMoneyChart" id="myCategoryMoneyChart" style="width: 100%;height:300px;">
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import { getOrderStatisticsByDate, getTypesAndGoods } from '../api/order'
import { closeLoad, openLoad } from '../../utils/loading'
import { showNotify } from 'vant'
import { getCurrentInstance, onMounted, reactive, ref, toRefs, watchEffect } from 'vue'
export default {
    setup() {
        let internalInstance = getCurrentInstance()
        let echarts = internalInstance.appContext.config.globalProperties.$echarts

        const data = reactive({
            active: ref(0),
            date: ref(''),
            date1: ref(''),
            show: ref(false),
            show1: ref(false),
            orderData: [],
            activeIndex: ref(0),
            typeData: [],
            begin: ref(''),
            end: ref(''),
            begin1: ref(''),
            end1: ref(''),
            items: [{ text: '', disabled: true, badge: '', }, { text: '', disabled: true, badge: '' }, { text: '', disabled: true, badge: '' }, { text: '', disabled: true, badge: '' }, { text: '', disabled: true, badge: '' }, { text: '', disabled: true, badge: '' }, { text: '', disabled: true, badge: '' }]
        })

        const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;

        const methods = {
            bindData() {
                openLoad()
                getOrderStatisticsByDate({
                    begin: data.begin,
                    end: data.end
                }).then((res) => {
                    if (res.result === 0) {
                        data.orderData = res.data
                        methods.getTypesAndGoods()
                    } else {
                        closeLoad()
                        showNotify({ type: 'danger', message: res.message });
                    }
                })
            },
            bindData1() {
                openLoad()
                getOrderStatisticsByDate({
                    begin: data.begin1,
                    end: data.end1
                }).then((res) => {
                    if (res.result === 0) {
                        data.orderData = res.data
                        methods.getTypesAndGoods()
                    } else {
                        closeLoad()
                        showNotify({ type: 'danger', message: res.message });
                    }
                })
            },
            getmyMoneyChart() {
                const domMoney = document.getElementById("myMoneyChart")
                const myMoneyChart = echarts.init(domMoney)
                var optionMoney = {
                    title: {
                        text: "近7日销售金额",
                        textStyle: {
                            fontSize: 18,
                            color: "orange", // 主标题文字颜色
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ["销售额", "成交额"],
                        x: "right",
                        padding: [6, 50, 0, 0],
                    },
                    xAxis: {
                        name: "日期",
                        nameTextStyle: {
                            padding: [0, 250, 0, 0],
                        },
                        data: data.orderData.moneyValues.columns,
                    },
                    yAxis: {
                        type: "value",
                        min: 0,
                        max: 100000,
                        axisLabel: {
                            show: true,
                            interval: "auto",
                            formatter: "{value}",
                        },

                    },
                    series: [
                        {
                            name: "销售额",
                            type: "bar",
                            data: data.orderData.moneyValues.values,
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                        {
                            name: "成交额",
                            type: "bar",
                            data: data.orderData.currMoneyValues.values,
                            label: {
                                show: true,
                                // position: 'top'
                            },
                        },
                    ]
                };
                myMoneyChart.setOption(optionMoney);

                const domOrder = document.getElementById("myOrderChart")
                const myOrderChart = echarts.init(domOrder)
                var optionOrder = {
                    title: {
                        text: "近7日订单数据",
                        textStyle: {
                            fontSize: 18,
                            color: "orange", // 主标题文字颜色
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ["订单数", "成交数"],
                        x: "right",
                        padding: [6, 50, 0, 0],
                    },
                    xAxis: {
                        name: "日期",
                        nameTextStyle: {
                            padding: [0, 250, 0, 0],
                        },
                        data: data.orderData.orderValues.columns,
                    },
                    yAxis: {
                        type: "value",
                        min: 0,
                        max: 12,
                        axisLabel: {
                            show: true,
                            interval: "auto",
                            formatter: "{value}",
                        },
                    },
                    series: [
                        {
                            name: "订单数",
                            type: "bar",
                            data: data.orderData.orderValues.values,
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                        {
                            name: "成交数",
                            type: "bar",
                            data: data.orderData.completeOrderValues.values,
                            label: {
                                show: true,
                                // position: 'top'
                            },
                        },
                    ]
                };
                myOrderChart.setOption(optionOrder);
            },
            getTypesAndGoods() {
                getTypesAndGoods().then((res) => {
                    if (res.result === 0) {
                        console.log(res.data.length, '11111111111');
                        data.typeData = res.data
                        res.data.forEach((d, i) => {
                            data.items[i].text = d.name;
                            data.items[i].badge = d.goods.length
                            if (i <= res.data.length) {
                                data.items[i].disabled = false
                            }
                        })
                        closeLoad()
                    }
                })
            }
        }
        const event = {
            getTypesAndGoods_3() {
                const domCategoryMoney = document.getElementById("myCategoryOrderChart")
                const myCategoryOrderChart = echarts.init(domCategoryMoney)
                var optionCategoryMoney = {
                    title: {
                        text: "订单数据",
                        textStyle: {
                            fontSize: 18,
                            color: "orange", // 主标题文字颜色
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ["订单数", "成交数"],
                        x: "right",
                        padding: [6, 50, 0, 0],
                    },
                    xAxis: {
                        name: "日期",
                        nameTextStyle: {
                            padding: [0, 250, 0, 0],
                        },
                        data: data.orderData.orderValues.columns,
                    },
                    yAxis: {
                        type: "value",
                        min: 0,
                        max: 8,
                        axisLabel: {
                            show: true,
                            interval: "auto",
                            formatter: "{value}",
                        },
                    },
                    series: [
                        {
                            name: "订单数",
                            type: "line",
                            data: data.orderData.orderValues.values,
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                        {
                            name: "成交数",
                            type: "line",
                            data: data.orderData.completeOrderValues.values,
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                    ]
                };
                myCategoryOrderChart.setOption(optionCategoryMoney);
            },
            getTypesAndGoods_4() {
                const domCategoryMoney = document.getElementById("myCategoryMoneyChart")
                const myCategoryMoneyChart = echarts.init(domCategoryMoney)
                var optionCategoryMoney = {
                    title: {
                        text: "近7日销售金额",
                        textStyle: {
                            fontSize: 18,
                            color: "orange", // 主标题文字颜色
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ["销售额", "成交额"],
                        x: "right",
                        padding: [6, 50, 0, 0],
                    },
                    xAxis: {
                        name: "日期",
                        nameTextStyle: {
                            padding: [0, 250, 0, 0],
                        },
                        data: data.orderData.moneyValues.columns,
                    },
                    yAxis: {
                        type: "value",
                        min: 0,
                        max: 60000,
                        axisLabel: {
                            show: true,
                            interval: "auto",
                            formatter: "{value}",
                        },
                    },
                    series: [
                        {
                            name: "销售额",
                            type: "line",
                            data: data.orderData.moneyValues.values,
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                        {
                            name: "成交额",
                            type: "line",
                            data: data.orderData.currMoneyValues.values,
                            label: {
                                show: true,
                                position: 'bottom'
                            },
                        },
                    ]
                };
                myCategoryMoneyChart.setOption(optionCategoryMoney);
            },
            tabsClick(active) {
                if (active === 0) {
                    getTypesAndGoods()
                }
                if (active === 1) {

                }
                if (active === 2) {
                    event.getTypesAndGoods_3()
                }
                if (active === 3) {
                    event.getTypesAndGoods_4()
                }
            },
            onConfirm(values) {
                const [start, end] = values;
                data.show = false;
                data.date = `${formatDate(start)} - ${formatDate(end)}`;
                data.begin = formatDate(start)
                data.end = formatDate(end)
                console.log(data.begin, data.end);
                methods.bindData()
                setTimeout(() => {
                    event.getTypesAndGoods_3()
                }, 3000)
            },
            onConfirm2(values) {
                const [start, end] = values;
                data.show1 = false;
                data.date1 = `${formatDate(start)} - ${formatDate(end)}`;
                data.begin1 = formatDate(start)
                data.end1 = formatDate(end)
                console.log(data.begin1, data.end1);
                methods.bindData1()
                setTimeout(() => {
                    event.getTypesAndGoods_4()
                }, 3000)
            }
        }

        onMounted(() => {
            setTimeout(() => {
                methods.getmyMoneyChart()
            }, 2000);
        });

        watchEffect(() => {
            methods.bindData()
            methods.bindData1()
        })

        return ({
            ...toRefs(data),
            ...event,
            minDate1: new Date(2024, 0, 1),
            maxDate1: new Date(2024, 12, 31),
            minDate2: new Date(2024, 0, 1),
            maxDate2: new Date(2024, 12, 31),
        })
    },
}
</script>

<style>
.sale {
    width: 100vw;

}

.sale-top {
    padding: 10px;
    background-color: rgb(250, 235, 215);
    display: flex;
    justify-content: space-around;
}
</style>